<template>
    <div class="format">
      <!--*************************************      缩略图开始     *************************************************-->
      <div class="lixin_tab tab-content">

        <div class="tab-pane active" id="Format">
          <div class="row">
            <div class="col-xs-12">
              <div class="row lixin_xiaotu">
                <ul class="nav nav-pills">
                  <li class="col-md-4"><a href="#A01" data-toggle="tab">
                    <img src="./../../assets/xiaotu/格林公主保利水城店.jpg" alt=""><div class="mask" style="">
                    <img src="./../../assets/xiaotu/格林公主保利水城店.jpg" alt=""><span>格林公主保利水城店</span></div></a>
                  </li>
                  <li class="col-md-4"><a href="#A02" data-toggle="tab">
                    <img src="./../../assets/xiaotu/Friday_bar星期五.jpg" alt=""><div class="mask" style="">
                    <img src="./../../assets/xiaotu/Friday_bar星期五.jpg" alt=""><span>Friday_bar</span></div></a>
                  </li>
                  <li class="col-md-4"><a href="#A03" data-toggle="tab">
                    <img src="./../../assets/xiaotu/爱上的茶.jpg" alt=""><div class="mask" style="">
                    <img src="./../../assets/xiaotu/爱上的茶.jpg" alt=""><span>爱上的茶</span></div></a>
                  </li>
                  <li class="col-md-4"><a href="#A04" data-toggle="tab">
                    <img src="./../../assets/xiaotu/壹一茶甜.jpg" alt=""><div class="mask" style="">
                    <img src="./../../assets/xiaotu/壹一茶甜.jpg" alt=""><span>壹一茶甜</span></div></a>
                  </li>


                  <li class="col-md-4 hidden-xs"><a href="#B01" data-toggle="tab">
                    <img src="./../../assets/xiaotu/聚德方.jpg" alt=""><div class="mask" style="">
                    <img src="./../../assets/xiaotu/聚德方.jpg" alt=""><span>聚德方私房菜</span></div></a>
                  </li>
                  <li class="col-md-4 hidden-xs"><a href="#B02" data-toggle="tab">
                    <img src="./../../assets/xiaotu/板友寿司.jpg" alt=""><div class="mask" style="">
                    <img src="./../../assets/xiaotu/板友寿司.jpg" alt=""><span>板友寿司</span></div></a>
                  </li>
                  <li class="col-md-4 hidden-xs"><a href="#B03" data-toggle="tab">
                    <img src="./../../assets/xiaotu/橘子小院.jpg" alt=""><div class="mask" style="">
                    <img src="./../../assets/xiaotu/橘子小院.jpg" alt=""><span>橘子小院私家菜</span></div></a>
                  </li>
                  <li class="col-md-4 hidden-xs"><a href="#B04" data-toggle="tab">
                    <img src="./../../assets/xiaotu/石锅饭.jpg" alt=""><div class="mask" style="">
                    <img src="./../../assets/xiaotu/石锅饭.jpg" alt=""><span>石锅拌饭</span></div></a>
                  </li>


                  <li class="col-md-4 hidden-xs"><a href="#C01" data-toggle="tab">
                    <img src="./../../assets/xiaotu/69公主生活馆.jpg" alt=""><div class="mask" style="">
                    <img src="./../../assets/xiaotu/69公主生活馆.jpg" alt=""><span>69公主生活馆</span></div></a>
                  </li>
                  <li class="col-md-4 hidden-xs"><a href="#C02" data-toggle="tab">
                    <img src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%B7%98%E8%A1%A3%E5%9D%8A%20%281%29.jpg" alt=""><div class="mask" style="">
                    <img src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%B7%98%E8%A1%A3%E5%9D%8A%20%281%29.jpg" alt=""><span>淘衣坊</span></div></a>
                  </li>
                  <li class="col-md-4 hidden-xs"><a href="#C03" data-toggle="tab">
                    <img src="./../../assets/xiaotu/OUTILINK银饰店.jpg" alt=""><div class="mask" style="">
                    <img src="./../../assets/xiaotu/OUTILINK银饰店.jpg" alt=""><span>OUTI LINK银饰店</span></div></a>
                  </li>
                  <li class="col-md-4 hidden-xs"><a href="#C04" data-toggle="tab">
                    <img src="./../../assets/xiaotu/莫吉果.jpg" alt=""><div class="mask" style="">
                    <img src="./../../assets/xiaotu/莫吉果.jpg" alt=""><span>莫吉果奶茶店</span></div></a>
                  </li>

                </ul>
              </div>
            </div>

          </div>
        </div>

      </div>
      <div class="lixincontent">
        <div class="tab-content">

          <div class="tab-pane active" id="A01">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>格林公主保利水城店</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E4%BD%9B%E5%B1%B1%E4%BF%9D%E5%88%A9%E6%B0%B4%E5%9F%8E%E6%A0%BC%E6%9E%97%E5%85%AC%E4%B8%BB%E5%BA%97%20%281%29.jpg" alt="">
                  <div class="mask2"><h1>格林公主保利水城店</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">

                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E4%BD%9B%E5%B1%B1%E4%BF%9D%E5%88%A9%E6%B0%B4%E5%9F%8E%E6%A0%BC%E6%9E%97%E5%85%AC%E4%B8%BB%E5%BA%97%20%282%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E4%BD%9B%E5%B1%B1%E4%BF%9D%E5%88%A9%E6%B0%B4%E5%9F%8E%E6%A0%BC%E6%9E%97%E5%85%AC%E4%B8%BB%E5%BA%97%20%283%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E4%BD%9B%E5%B1%B1%E4%BF%9D%E5%88%A9%E6%B0%B4%E5%9F%8E%E6%A0%BC%E6%9E%97%E5%85%AC%E4%B8%BB%E5%BA%97%20%285%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E4%BD%9B%E5%B1%B1%E4%BF%9D%E5%88%A9%E6%B0%B4%E5%9F%8E%E6%A0%BC%E6%9E%97%E5%85%AC%E4%B8%BB%E5%BA%97%20%286%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E4%BD%9B%E5%B1%B1%E4%BF%9D%E5%88%A9%E6%B0%B4%E5%9F%8E%E6%A0%BC%E6%9E%97%E5%85%AC%E4%B8%BB%E5%BA%97%20%287%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E4%BD%9B%E5%B1%B1%E4%BF%9D%E5%88%A9%E6%B0%B4%E5%9F%8E%E6%A0%BC%E6%9E%97%E5%85%AC%E4%B8%BB%E5%BA%97%20%288%29.jpg" alt="">


              </div>

            </div>

          </div>

          <div class="tab-pane " id="A02">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>彩虹昔</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="
                  https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%98%9F%E6%9C%9F%E4%BA%94%E5%A5%B6%E8%8C%B6%E5%BA%97%20%284%29.jpg" alt="">
                  <div class="mask2"><h1>Friday_bar星期五</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%98%9F%E6%9C%9F%E4%BA%94%E5%A5%B6%E8%8C%B6%E5%BA%97%20%287%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%98%9F%E6%9C%9F%E4%BA%94%E5%A5%B6%E8%8C%B6%E5%BA%97%20%288%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%98%9F%E6%9C%9F%E4%BA%94%E5%A5%B6%E8%8C%B6%E5%BA%97%20%286%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%98%9F%E6%9C%9F%E4%BA%94%E5%A5%B6%E8%8C%B6%E5%BA%97%20%285%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%98%9F%E6%9C%9F%E4%BA%94%E5%A5%B6%E8%8C%B6%E5%BA%97%20%281%29.jpg" alt="">
              </div>

            </div>

          </div>

          <div class="tab-pane " id="A03">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>彩虹昔</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="
                  https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%88%B1%E4%B8%8A%E7%9A%84%E8%8C%B6%20%289%29.jpg" alt="">
                  <div class="mask2"><h1>爱上的茶</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%88%B1%E4%B8%8A%E7%9A%84%E8%8C%B6%20%284%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%88%B1%E4%B8%8A%E7%9A%84%E8%8C%B6%20%281%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%88%B1%E4%B8%8A%E7%9A%84%E8%8C%B6%20%282%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%88%B1%E4%B8%8A%E7%9A%84%E8%8C%B6%20%285%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%88%B1%E4%B8%8A%E7%9A%84%E8%8C%B6%20%286%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%88%B1%E4%B8%8A%E7%9A%84%E8%8C%B6%20%2813%29.jpg" alt="">
              </div>

            </div>

          </div>

          <div class="tab-pane " id="A04">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>彩虹昔</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="
                  https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E5%A3%B9%E4%B8%80%E8%8C%B6%E7%94%9C%20%281%29.jpg" alt="">
                  <div class="mask2"><h1>壹一茶甜</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E5%A3%B9%E4%B8%80%E8%8C%B6%E7%94%9C%20%282%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E5%A3%B9%E4%B8%80%E8%8C%B6%E7%94%9C%20%285%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E5%A3%B9%E4%B8%80%E8%8C%B6%E7%94%9C%20%287%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E5%A3%B9%E4%B8%80%E8%8C%B6%E7%94%9C%20%286%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E5%A3%B9%E4%B8%80%E8%8C%B6%E7%94%9C%20%283%29.jpg" alt="">

              </div>

            </div>

          </div>


          <div class="tab-pane " id="B01">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>彩虹昔</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="
                  https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%88%B1%E4%B8%8A%E7%9A%84%E8%8C%B6%20%289%29.jpg" alt="">
                  <div class="mask2"><h1>聚德方私房菜</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E8%81%9A%E5%BE%B7%E6%96%B9%20%281%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E8%81%9A%E5%BE%B7%E6%96%B9%20%282%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E8%81%9A%E5%BE%B7%E6%96%B9%20%283%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E8%81%9A%E5%BE%B7%E6%96%B9%20%284%29.jpg" alt="">

              </div>

            </div>

          </div>

          <div class="tab-pane " id="B02">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>彩虹昔</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="
                  https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%88%B1%E4%B8%8A%E7%9A%84%E8%8C%B6%20%2811%29.jpg" alt="">
                  <div class="mask2"><h1>板友寿司</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%9D%BF%E5%8F%8B%E5%AF%BF%E5%8F%B8%20%288%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%9D%BF%E5%8F%8B%E5%AF%BF%E5%8F%B8%20%281%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%9D%BF%E5%8F%8B%E5%AF%BF%E5%8F%B8%20%282%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%9D%BF%E5%8F%8B%E5%AF%BF%E5%8F%B8%20%283%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%9D%BF%E5%8F%8B%E5%AF%BF%E5%8F%B8%20%284%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%9D%BF%E5%8F%8B%E5%AF%BF%E5%8F%B8%20%285%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%9D%BF%E5%8F%8B%E5%AF%BF%E5%8F%B8%20%286%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%9D%BF%E5%8F%8B%E5%AF%BF%E5%8F%B8%20%287%29.jpg" alt="">

              </div>

            </div>

          </div>

          <div class="tab-pane " id="B03">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>彩虹昔</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="
                  https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%A9%98%E5%AD%90%E5%B0%8F%E9%99%A2%20%286%29.jpg" alt="">
                  <div class="mask2"><h1>橘子小院私家菜</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%A9%98%E5%AD%90%E5%B0%8F%E9%99%A2%20%281%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%A9%98%E5%AD%90%E5%B0%8F%E9%99%A2%20%282%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%A9%98%E5%AD%90%E5%B0%8F%E9%99%A2%20%283%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%A9%98%E5%AD%90%E5%B0%8F%E9%99%A2%20%284%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%A9%98%E5%AD%90%E5%B0%8F%E9%99%A2%20%285%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%A9%98%E5%AD%90%E5%B0%8F%E9%99%A2%20%2824%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%A9%98%E5%AD%90%E5%B0%8F%E9%99%A2%20%2825%29.jpg" alt="">

              </div>

            </div>

          </div>

          <div class="tab-pane " id="B04">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>石锅拌饭</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="
                  https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%88%B1%E4%B8%8A%E7%9A%84%E8%8C%B6%20%2812%29.jpg" alt="">
                  <div class="mask2"><h1>石锅拌饭</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%9F%B3%E9%94%85%E6%8B%8C%E9%A5%AD%20%281%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%9F%B3%E9%94%85%E6%8B%8C%E9%A5%AD%20%282%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%9F%B3%E9%94%85%E6%8B%8C%E9%A5%AD%20%283%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%9F%B3%E9%94%85%E6%8B%8C%E9%A5%AD%20%284%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%9F%B3%E9%94%85%E6%8B%8C%E9%A5%AD%20%285%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%9F%B3%E9%94%85%E6%8B%8C%E9%A5%AD%20%286%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E7%9F%B3%E9%94%85%E6%8B%8C%E9%A5%AD%20%287%29.jpg" alt="">


              </div>

            </div>

          </div>


          <div class="tab-pane " id="C01">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>69公主生活馆</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="
                  https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/69%E5%85%AC%E4%B8%BB%E7%94%9F%E6%B4%BB%E9%A6%86%20%285%29.jpg" alt="">
                  <div class="mask2"><h1>69公主生活馆</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/69%E5%85%AC%E4%B8%BB%E7%94%9F%E6%B4%BB%E9%A6%86%20%282%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/69%E5%85%AC%E4%B8%BB%E7%94%9F%E6%B4%BB%E9%A6%86%20%283%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/69%E5%85%AC%E4%B8%BB%E7%94%9F%E6%B4%BB%E9%A6%86%20%284%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/69%E5%85%AC%E4%B8%BB%E7%94%9F%E6%B4%BB%E9%A6%86%20%281%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/69%E5%85%AC%E4%B8%BB%E7%94%9F%E6%B4%BB%E9%A6%86%20%286%29.jpg" alt="">

              </div>

            </div>

          </div>

          <div class="tab-pane " id="C02">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>淘衣坊</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="
                  https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%B7%98%E8%A1%A3%E5%9D%8A%20%285%29.jpg" alt="">
                  <div class="mask2"><h1>淘衣坊</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%B7%98%E8%A1%A3%E5%9D%8A%20%282%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%B7%98%E8%A1%A3%E5%9D%8A%20%283%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E6%B7%98%E8%A1%A3%E5%9D%8A%20%284%29.jpg" alt="">

              </div>

            </div>

          </div>

          <div class="tab-pane " id="C03">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>OUTI LINK银饰店</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="
                  https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E9%93%B6%E9%A5%B0%E5%BA%97%20%289%29.jpg" alt="">
                  <div class="mask2"><h1>OUTI LINK银饰店</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E9%93%B6%E9%A5%B0%E5%BA%97%20%289%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E9%93%B6%E9%A5%B0%E5%BA%97%20%281%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E9%93%B6%E9%A5%B0%E5%BA%97%20%282%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E9%93%B6%E9%A5%B0%E5%BA%97%20%283%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E9%93%B6%E9%A5%B0%E5%BA%97%20%2810%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E9%93%B6%E9%A5%B0%E5%BA%97%20%2811%29.jpg" alt="">

              </div>

            </div>

          </div>

          <div class="tab-pane " id="C04">

            <div class="row">
              <div class="contentleft col-md-2  ">
                <div class="col-12"><span>品牌：</span>莫吉果奶茶店</div>
                <div class="col-12"><span>Client：</span>Smoothiebowl</div>
                <div class="col-12"><span>类型：</span>商业空间设计</div>
                <div class="col-12"><span>Category：</span>Store design</div>
                <div class="col-12"><span>地点：</span>上海</div>
                <div class="col-12"><span>Location：</span>Shanghai</div>
                <div class="col-12"><span>面积：</span>20 sqm.</div>
                <div class="col-12"><span>Area：</span> 20 sqm.</div>
                <div class="col-12"><span>状态：</span>设计完成、施工完成</div>
                <div class="col-12"><span>Status：</span>Design Completed and Constructed</div>
                <div class="col-12"><span>时间：</span>2017</div>
                <div class="col-12"><span>Timeframe：</span>2017</div>
                <div class="col-12"><span>主创：</span>斗西、Aimee、菜菜</div>
              </div>

              <div class="leftimg col-md-5 ">
                <a href="#" class="lefta">
                  <img src="
                  https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E8%8E%AB%E5%90%89%E6%9E%9C%20%281%29.jpg" alt="">
                  <div class="mask2"><h1>莫吉果奶茶店</h1></div>
                </a>
              </div>

              <div v-lazy-container= "{selector:'img'}"  class="rightimg col-xs-12 col-md-5">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E8%8E%AB%E5%90%89%E6%9E%9C%20%285%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E8%8E%AB%E5%90%89%E6%9E%9C%20%284%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E8%8E%AB%E5%90%89%E6%9E%9C%20%282%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E8%8E%AB%E5%90%89%E6%9E%9C%20%283%29.jpg" alt="">
                <img data-src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/%E8%8E%AB%E5%90%89%E6%9E%9C%20%286%29.jpg" alt="">

              </div>

            </div>

          </div>


        </div>
      </div>



    </div>
</template>

<script>
    export default {
        name: "format",

    }
</script>

<style scoped>
  /*小图开始*/
  .lixinbanner ul li {
    padding: 0px;
  }
  .lixin_tab ul li{
    width: 150px;
    padding: 10px 10px;
    margin-left: 0px;
  }
  .lixin_tab ul li img{
    width: 100%;
    /*padding: 10px 10px;*/
  }
  .lixin_tab ul li a{
    padding: 0;
  }
  .lixin_xiaotu{
    position: relative;
  }
  .lixin_xiaotu ul{
    display: flex;
    justify-content:space-around;
  }
  .lixin_xiaotu ul li{
    position: relative;
  }
  .lixin_xiaotu ul li a{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    transition: all 0.5s;
  }
  .lixin_xiaotu ul li img{
    width: 100%;
    height: 100%;
  }
  .mask {
    width: 100%;
    height: 100%;
    /*background: url("./../../assets/xiaotu/69公主生活馆.jpg");*/
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden; /* 首先正常情况下 是隐藏的*/
    opacity: 0;
    text-align: center;
    color: #ffffff;
    transition: all 0.5s; /*  过渡写到本身上 谁做过渡动画，写到谁身上*/
  }
  .mask span{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background:rgba(0,0,0,.5);
    transition: all 0.8s;
    opacity: 0;
    cursor: unset;
    display: block;
    text-overflow:ellipsis;
    /*padding-top: 20%;*/
    padding: 20% 5px;
  }
  .lixin_xiaotu ul li a:hover .mask { /*：hover  鼠标经过a 然后 a 里面的 mask 就显示出来 所以这里用 后代选择器*/
    visibility: visible; /*显示出来*/
    opacity:1;
    transform:scale(1.1,1.1);
    z-index: 99;
  }
  .mask span:hover { /*：hover  鼠标经过a 然后 a 里面的 mask 就显示出来 所以这里用 后代选择器*/
    transition: all .2s ease-out;
    opacity: 1;
    filter: alpha(opacity=100);
    font-weight: bold;
  }
  /*小图结束*/

  /* 小图*/
  /*.lixin_tab .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {*/
    /*color: #fff;*/
    /*background-color: #ffffff;*/
  /*}*/

  /* 大内容*/

  /*左文本 开始*/
  .contentleft{
    padding-top: 20px;
    padding-left: 25px;
  }
  .contentleft span{
    font-weight: bold;
  }
  .contentleft div{
    line-height: 1.8;
  }
  /*左文本 结束*/

  /*右图 开始*/
  .rightimg{
    overflow:auto;
    height:600px;
    padding-top: 20px;
    padding-right: 15px;
    /*padding: 0px 0px;*/

  }
  .rightimg img{
    border-bottom: #ffffff 5px solid;
  }

  ::-webkit-scrollbar {
    display: none;/*隐藏滚轮*/
  }
  .rightimg img{
    display: inline-block;
    width: 100%;
    /*padding-right: 25px;*/
  }
  /*右图 结束*/

  /*左图 开始*/
  .leftimg{
    padding-top: 20px;
    padding-right: 15px;
    position: relative;
  }
  .leftimg img{
    width: 100%;
    height: 100%;
  }
  .leftimg a{
    transition: all .5s; /*  过渡写到本身上 谁做过渡动画，写到谁身上*/
  }
  .leftimg a:hover{
    box-shadow: 5px 9px 10px rgba(0, 0, 0, .6);
    transform: translateY(-10px);
  }
  .lefta{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .mask2 {
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, .4) url("https://fulgorbrand.oss-cn-beijing.aliyuncs.com/lilxinsheji-19-6-29/logo_bai.png") no-repeat center;
    background-size: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden; /* 首先正常情况下 是隐藏的*/
    opacity: 0;
    display: block; /* 首先正常情况下 是隐藏的*/
    color: #ffffff;
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
    align-items:flex-end;
    transition: all 0.7s;
    /*text-align: center;*/
  }
  .mask2 h1{
    line-height: 1.5;
    border-bottom: white 3px solid;
    border-top: white 3px solid;
    font-size: 28px;
  }
  .leftimg a:hover .mask2 { /*：hover  鼠标经过a 然后 a 里面的 mask 就显示出来 所以这里用 后代选择器*/
    visibility: visible;
    opacity: 1;
  }

  /*左图 结束*/

</style>
